<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			.test{width: 100px;height: 100px;background-color: deeppink;margin: 5px;}
		</style>
	</head>
	<body>
		<!-- 
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"，这里的in也可以换成of，这里的key前面一定要有冒号:
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
						4.如果不写key，则vue会自动将index值作为key的值
		-->
		<!-- 准备好一个容器-->
		<div id="box">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<!-- <li v-for="a in persons" >
					{{a.id}}---{{a.name}}---{{a.age}}
				</li> -->
				<li v-for="(p,index) in persons" :key='index'>
					00{{index+1}}---{{p.name}}---{{p.age}}<button type="button" @click='removeP(index)'>删除</button>
				</li>
			</ul>
			<button @click='addP'>点我加个小白</button>
			<!-- 你想生成多个谁，就在谁身上放一个v-for -->
			<!-- <div v-for="num in 4" class="test"></div> -->
		<!-- 	<div ></div>
			<div ></div>
			<div ></div> -->

			
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#box',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					addP() {
						this.persons.unshift({id:'004',name:'小白',age:30})
					},
					removeP(i){
						this.persons.splice(i,1)
					}
				},
			})
		</script>
</html>